<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- preload预加载 prefetch用浏览器的空闲时间去加载 -->
    <link rel="prefetch" href="aaa.js" as="script"/>
    <link rel="preload" href="bbb.js" as="script"/>
</head>
<!-- 参考这个连接https://blog.csdn.net/weixin_46163658/article/details/119900838 -->
<body>
    <!-- 如果不写href属性，<a>元素将会和普通元素无异 如果写其取值可以是绝对路径，相对路径和锚点等多种值。设置锚点就是使用超链接实现书签标签的方法。 -->
    <div style="width:0px;background:red">0%</div>
    <!-- 绝对路径打开百度页面 -->
    <a href="http://baidu.com" target="_blank" title="将会在新的页面打开百度页面">百度</a>
    <!-- 相对路径打开demo1.html -->
    <a href="./demo1.html" target="_blank" title="将会在当前页面打开古诗页面">古诗</a>
    <!-- 锚点 -->
    <!-- #代表链接到当前网址 -->
    <!-- 不设置target属性，默认在当前页面打开 设置target属性在新页面打开-->
    <a href="#" title="锚点链接，链接到自身" target="_blank">锚点链接</a>


<!-- a标签中href="#xxx"跳到id="xxx"
 HTML中a标签中href="#xxx"，当点击后，页面会跳转到标签中id="xxx"的地方。
 同时，在URL上的后面会看到加上了#xxx，这样直接改变URL中#后面的值，然后页面就可以跳转到标签中id为这个值的地方 -->
    <!-- <a href="#third">跳转到第三个h标签</a>
    <div style="height:5000px"></div>
    <h1>第一个h标签</h1>
    <h1>第二个h标签</h1>
    <h1 id="third">第三个h标签</h1>
    <h1>第四个h标签</h1>
    <h1>第五个h标签</h1> -->
    <a href="#first">开始</a>
    <a href="#third">结束</a>
    <div style="width:500px;background:red;white-space: nowrap;overflow: auto;">
       <span id="first">qqqqqqqqqqqqqq</span>
       <span>wwwwwwwwwww</span>
       <span>eeeeeeeeee</span>
       <span>rrrrrrrrrrrrrrr</span>
       <span id="third">ttttttttttttttt</span>
    </div>
</body>
<script>
</script>
<script src="aaa.js"></script>
<script src="bbb.js"></script>
</html>